<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>谜语管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .container {
            width: 80%;
            margin: 20px auto;
        }
        .header {
            margin-bottom: 20px;
            text-align: center;
        }
        .el-table {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1>谜语管理系统</h1>
            </div>
            
            <!-- 添加按钮 -->
            <el-button type="primary" @click="dialogVisible = true">添加谜语</el-button>
            
            <!-- 数据表格 -->
            <el-table :data="riddles" border style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="question" label="谜面"></el-table-column>
                <el-table-column prop="answer" label="谜底"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 添加/编辑对话框 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
                <el-form :model="form">
                    <el-form-item label="谜面" :label-width="formLabelWidth">
                        <el-input v-model="form.question" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="谜底" :label-width="formLabelWidth">
                        <el-input v-model="form.answer" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                riddles: [],
                dialogVisible: false,
                dialogTitle: '添加谜语',
                form: {
                    id: null,
                    question: '',
                    answer: ''
                },
                formLabelWidth: '120px'
            },
            created() {
                this.fetchRiddles()
            },
            methods: {
                fetchRiddles() {
                    axios.get('/api/riddles')
                        .then(response => {
                            this.riddles = response.data
                        })
                },
                handleEdit(row) {
                    this.form = {...row}
                    this.dialogTitle = '编辑谜语'
                    this.dialogVisible = true
                },
                handleDelete(row) {
                    this.$confirm('确认删除该谜语吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.delete(`/api/riddles/${row.id}`)
                            .then(() => {
                                this.$message.success('删除成功')
                                this.fetchRiddles()
                            })
                    })
                },
                handleSubmit() {
                    const riddleData = {
                        '谜面': this.form.question,
                        '谜底': this.form.answer
                    }
                    
                    if (this.form.id) {
                        axios.put(`/api/riddles/${this.form.id}`, riddleData)
                            .then(() => {
                                this.$message.success('更新成功')
                                this.dialogVisible = false
                                this.fetchRiddles()
                            })
                            .catch(error => {
                                this.$message.error('更新失败：' + error.message)
                            })
                    } else {
                        axios.post('/api/riddles', riddleData)
                            .then(() => {
                                this.$message.success('添加成功')
                                this.dialogVisible = false
                                this.resetForm()
                                this.fetchRiddles()
                            })
                            .catch(error => {
                                this.$message.error('添加失败：' + error.message)
                            })
                    }
                },
                resetForm() {
                    this.form = {
                        id: null,
                        question: '',
                        answer: ''
                    }
                }
            }
        })
    </script>
</body>
</html> 